<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-ui-rnb-contents">
  <div class="ddp-ui-title">
    {{'msg.bench.ui.workbench.nav' | translate}} <span class="ddp-data-num2">({{pageResult.totalElements}})</span>
  </div>
  <div class="ddp-ui-option">
    <!-- search -->
    <div class="ddp-form-search">
      <em class="ddp-icon-search"></em>
      <input type="text" placeholder="{{'msg.bench.ui.search'|translate}}" [(ngModel)]="searchText" (keyup.esc)="searchText = ''">
      <em class="ddp-btn-search-close" *ngIf="searchText" (click)="searchText = ''"></em>
    </div>
    <!-- //search -->
    <!-- selectbox -->
    <!-- 클릭시 ddp-selected 추가 -->
    <!--<div class="ddp-wrap-selectbox ">-->
      <!--<component-select-->
        <!--[array]="selectedData"-->
        <!--[viewKey]="'name'"-->
        <!--(onSelected)="onSelectedFilter($event)"></component-select>-->
    <!--</div>-->
    <!-- //selectbox -->

    <!--<div class="ddp-wrap-selectbox " (click)="openFilter()" [ngClass]="{'ddp-selected':isFilterShow}">-->
      <!--<div class="ddp-data-selectbox" >-->
        <!--{{selectedData === '' ? '전체': selectedData}}-->
      <!--</div>-->

      <!--<div class="ddp-wrap-popup2">-->
        <!--<ul class="ddp-list-popup">-->
          <!--<li class="ddp-selected" *ngFor="let item of filterTypes">-->
            <!--<a href="javascript:" (click)="onSelectedFilter(item)">-->
              <!--{{item.name}}-->
              <!--&lt;!&ndash;<em class="ddp-icon-check"></em>&ndash;&gt;-->
            <!--</a>-->
          <!--</li>-->
        <!--</ul>-->
      <!--</div>-->
    <!--</div>-->

  </div>

  <div class="ddp-wrap-table-simple">
    <!-- thead -->
    <div class="ddp-table-thead">
      <table class="ddp-table-simple">
        <colgroup>
          <col width="60px" />
          <col width="*" />
          <col width="130px" />
        </colgroup>
        <thead>
        <tr>
          <th class="ddp-txt-center">
            {{'msg.comm.th.no'|translate}}
          </th>
          <th>
            {{'msg.bench.th.wb.name'|translate}}
          </th>
          <th>
            {{'msg.comm.th.updated'|translate}}
            <!--<em class="ddp-icon-array-default2"></em>-->
          </th>
        </tr>
        </thead>

      </table>
    </div>
    <!-- //thead -->
    <!-- tbody -->
    <div class="ddp-table-tbody">
      <table class="ddp-table-simple">
        <colgroup>
          <col width="60px" />
          <col width="*" />
          <col width="130px" />
        </colgroup>
        <tbody>
        <tr *ngFor="let item of filteredNavigation; let idx = index" (click)="goWorkbench(item)">
          <td class="ddp-txt-center">
            {{pageResult.totalElements-idx}}
          </td>
          <td>
            {{item.name}}
          </td>
          <td>
            {{item.modifiedTime | date:'yyyy-MM-dd' }}
          </td>
        </tr>
        </tbody>
      </table>

      <a href="javascript:" class="ddp-btn-more" *ngIf="page.page < (pageResult.totalPages-1)" (click)="moreButton();">+ {{'msg.comm.ui.more' | translate}}</a>

    </div>
    <!-- //tbody -->

  </div>

</div>
